<template>
	<view class="container">
		<view class="card mb-20">
			<view class="setting-item flex justify-between align-center p-20 mb-20" @click="goToPage('/pages/userinfo/index')">
				<view class="flex align-center">
					<text class="iconfont icon-user" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>个人资料</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="setting-item flex justify-between align-center p-20 mb-20">
				<view class="flex align-center">
					<text class="iconfont icon-lock" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>账号与安全</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="setting-item flex justify-between align-center p-20 mb-20">
				<view class="flex align-center">
					<text class="iconfont icon-notification" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>消息通知</text>
				</view>
				<switch checked style="transform: scale(0.8);" />
			</view>
			<view class="setting-item flex justify-between align-center p-20">
				<view class="flex align-center">
					<text class="iconfont icon-privacy" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>隐私设置</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		
		<view class="card mb-20">
			<view class="setting-item flex justify-between align-center p-20 mb-20">
				<view class="flex align-center">
					<text class="iconfont icon-language" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>语言设置</text>
				</view>
				<text>简体中文 ></text>
			</view>
			<view class="setting-item flex justify-between align-center p-20">
				<view class="flex align-center">
					<text class="iconfont icon-location" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>位置服务</text>
				</view>
				<switch checked style="transform: scale(0.8);" />
			</view>
		</view>
		
		<view class="card mb-20">
			<view class="setting-item flex justify-between align-center p-20 mb-20" @click="clearCache">
				<view class="flex align-center">
					<text class="iconfont icon-cache" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>清除缓存</text>
				</view>
				<text>{{ cacheSize }} ></text>
			</view>
			<view class="setting-item flex justify-between align-center p-20 mb-20">
				<view class="flex align-center">
					<text class="iconfont icon-about" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>关于我们</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="setting-item flex justify-between align-center p-20">
				<view class="flex align-center">
					<text class="iconfont icon-update" style="font-size: 40rpx; color: #007AFF; margin-right: 20rpx;"></text>
					<text>检查更新</text>
				</view>
				<text>当前版本1.0.0 ></text>
			</view>
		</view>
		
		<view class="button" style="background: #ff3b30;" @click="logout">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cacheSize: '15.2MB'
			}
		},
		methods: {
			goToPage(url) {
				// 检查页面是否存在，如果不存在则给出提示
				uni.navigateTo({
					url: url,
					fail: (err) => {
						console.log('页面跳转失败:', err);
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
					}
				})
			},
			clearCache() {
				uni.showModal({
					title: '提示',
					content: '确定要清除缓存吗？',
					success: (res) => {
						if (res.confirm) {
							this.cacheSize = '0KB';
							uni.showToast({
								title: '缓存清除成功',
								icon: 'success'
							})
						}
					}
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('isLogin');
							uni.removeStorageSync('userInfo');
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/login/index'
								})
							}, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.setting-item {
		border-bottom: 1rpx solid #eee;
	}
	
	.setting-item:last-child {
		border-bottom: none;
	}
</style>